<template>
  <div>
    <table>
      <tr>
        <th>{{ $lang("中文字体") }}</th>
        <th>{{ $lang("示例") }}</th>
        <th>{{ $lang("粗细") }}</th>
        <th>{{ $lang("颜色") }}</th>
        <th>{{ $lang("字号") }}</th>
      </tr>
      <tr>
        <td>主标题</td>
        <td><p class="yo-h1">我是主标题</p></td>
        <td>加粗</td>
        <td><span style="background-color: #464c5b"></span>#464c5b</td>
        <td>16px</td>
      </tr>
      <tr>
        <td>副标题</td>
        <td><p class="yo-h2">我是副标题</p></td>
        <td>加粗</td>
        <td><span style="background-color: #464c5b"></span>#464c5b</td>
        <td>14px</td>
      </tr>
      <tr>
        <td>小标题</td>
        <td><p class="yo-h3">我是小标题</p></td>
        <td>加粗</td>
        <td><span style="background-color: #464c5b"></span>#464c5b</td>
        <td>13px</td>
      </tr>
      <tr>
        <td>正文</td>
        <td><p class="yo-h">我是正文</p></td>
        <td>默认</td>
        <td><span style="background-color: #464c5b"></span>#464c5b</td>
        <td>13px</td>
      </tr>
      <tr>
        <td>辅助文字</td>
        <td><p class="yo-h-assist">我是辅助文字</p></td>
        <td>默认</td>
        <td><span style="background-color: #9ea7b4"></span>#9ea7b4</td>
        <td>12px</td>
      </tr>
      <tr>
        <td>失效文字</td>
        <td><p class="yo-h-disabled">我是失效文字</p></td>
        <td>默认</td>
        <td><span style="background-color: #c3cbd6"></span>#c3cbd6</td>
        <td>12px</td>
      </tr>
      <tr>
        <td>链接文字</td>
        <td><p class="yo-a">我是链接文字</p></td>
        <td>默认</td>
        <td><span style="background-color: #0a9fad"></span>#0a9fad</td>
        <td>12px</td>
      </tr>
    </table>

    <table>
      <tr>
        <th>{{ $lang("英文字体") }}</th>
        <th>{{ $lang("示例") }}</th>
        <th>{{ $lang("粗细") }}</th>
        <th>{{ $lang("颜色") }}</th>
        <th>{{ $lang("字号") }}</th>
      </tr>
      <tr>
        <td>Main Title</td>
        <td><p class="yo-h1">This is a Main Title</p></td>
        <td>bold</td>
        <td><span style="background-color: #464c5b"></span>#464c5b</td>
        <td>16px</td>
      </tr>
      <tr>
        <td>Sub Title</td>
        <td><p class="yo-h2">This is a Sub Title</p></td>
        <td>bold</td>
        <td><span style="background-color: #464c5b"></span>#464c5b</td>
        <td>14px</td>
      </tr>
      <tr>
        <td>Small Title</td>
        <td><p class="yo-h3">This is a Small Title</p></td>
        <td>bold</td>
        <td><span style="background-color: #464c5b"></span>#464c5b</td>
        <td>13px</td>
      </tr>
      <tr>
        <td>Text</td>
        <td><p class="yo-h">This is a Text</p></td>
        <td>default</td>
        <td><span style="background-color: #464c5b"></span>#464c5b</td>
        <td>13px</td>
      </tr>
      <tr>
        <td>Help</td>
        <td><p class="yo-h-assist">This is a assisted Text</p></td>
        <td>default</td>
        <td><span style="background-color: #9ea7b4"></span>#9ea7b4</td>
        <td>12px</td>
      </tr>
      <tr>
        <td>Disabled</td>
        <td><p class="yo-h-disabled">This is a disabled Text</p></td>
        <td>default</td>
        <td><span style="background-color: #c3cbd6"></span>#c3cbd6</td>
        <td>12px</td>
      </tr>
      <tr>
        <td>Link</td>
        <td><p class="yo-a">我是链接文字</p></td>
        <td>default</td>
        <td><span style="background-color: #0a9fad"></span>#0a9fad</td>
        <td>12px</td>
      </tr>
    </table>
  </div>
</template>
